{{extend 'layout.html'}}
<script>
    $(function() {
        $("table#songs").tablesorter({ sortList: [[0,0]] , 
            headers: {
                4: { sorter: false }
            }
        });

    });
</script>
<h3> Reviewing Album</h3>
<div class="row">
    <div class="span6">
        <form id="songs" class="form-stacked" method="POST"
            action={{"/radio/reviews/submit/%s" % album.AlbumID}}>
            <fieldset>
                <div class="clearfix">
                    <!--TODO: CHECK IF DIRECTOR, if not, DISABLE-->
                    <label for="album">Album </label>
                    <div class="input">
                        <input class="xlarge" id="album" name="album" size="30"
                        type="text" value="{{=album.AlbumName}}">
                    </div>
                </div>

                <div class="clearfix">
                    <label for="artist">Artist </label>
                    <div class="input">
                        <input class="xlarge" id="artist" name="artist" size="30"
                        type="text" value="{{=album.ArtistName}}">
                    </div>
                </div>

                <div class="clearfix">
                    <label for="promoter">Promoter</label>
                    <div class="input">
                        <input class="xlarge" id="promoter" name="promoter" size="30"
                        type=text" value="{{=album.Promoter}}">
                    </div>
                </div>
                {{if globals().get("access", "director") == "director":}}
                <div class="clearfix">
                    <label for="rotation">Rotation *</label>
                    <div class="input">
                        <select name="rotation" id="rotation">
                            {{for rttn in rotations.items():}}
                                {{if rttn[0] == album.Rotation:}}
                                <option value="{{=rttn[0]}}" selected>{{=rttn[1]}}</option>
                                {{else:}}
                                <option value="{{=rttn[0]}}">{{=rttn[1]}}</option>
                                {{pass}}
                            {{pass}}
                        </select>
                    </div>
                </div>
                {{pass}}

                <div class="clearfix">
                    <label for="genre">Genre *</label>
                    <div class="input">
                        <select name="genre" id="genre">
                            {{for genre in genres.items():}}
                                {{if genre[0] == album.Genre:}}
                                <option value="{{=genre[0]}}" selected>{{=genre[1]}}</option>
                                {{else:}}
                                <option value="{{=genre[0]}}">{{=genre[1]}}</option>
                                {{pass}}
                            {{pass}}
                        </select>
                    </div>
                </div>

                <div class="clearfix">
                    <label for="description">Description *</label>
                    <div class="input">
                        <textarea class="xlarge" name="description" id="description"
                            rows=10>{{=album.Description}}</textarea>
                    </div>
                </div> 

                <div class="clearfix">
                    <div class="input">
                        <input class="btn primary" id="submit" name="submit" 
                        type="submit" value="Submit">
                        <input class="btn" id="save" name="save" 
                        type="submit" value="Save">
                    </div>
                </div>
            </fieldset>
        </form>
    </div>
    <div class="span7">
        <script>
            $(function(){
                function submitSong() {
                    var title = $("input#title"),
                    rating = $("select#rating"),
                    visibility = $("input#visible");

                    if(title.val() == null || title.val().trim() == ""){
                        title.addClass("error");
                        $("div#title").addClass("error");
                        $("div#title > .input").append("\<span \
                            class='help-inline'\> Can't be Empty \
                            \</span\>");
                            $("div#title > .input > span");
                            return false;
                        }

                        $.post("/radio/music/add_song/",
                        { album_id : {{=album.AlbumID}} ,
                            title : title.val(), 
                            rating : rating.val(), 
                            visibility : ((visibility.val() == "on") ? 1 : 0) },
                        function(data) {
                            $("div#songTable").html(data);
                            return false;
                        });

                        return false;
                    } 

                    $("input#addSong").click(function() { 
                        return submitSong();
                    });

                    var loadUrl = "/radio/music/songs/" + {{=album.AlbumID}};
                    var ajaxLoad = "<img src='/radio/static/images/loadingAnimation.gif' alt='loading...' />"
                    $("div#songTable").html(ajaxLoad).load(loadUrl);
                });

            </script>
            <div id="songTable">
            </div>
            <form id="songs"> 
                <fieldset>
                    <legend>Add Song</legend> 
                    <div id="title" class="clearfix">
                        <label for="title">Title</label>
                        <div class="input">
                            <input class="xlarge" id="title" name="title" type="text">
                        </div>
                    </div>
                    <div class="clearfix">
                        <label for="visible">OK For Radio</label>
                        <div class="input">
                            <input id="visible"
                            name="visible" type="checkbox" checked>
                        </div>
                    </div>
                    <div class="clearfix">
                        <div class="input">
                            <input class="btn info" id="addSong" name="submit" type="submit"
                            value="Add">
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
    </div>
